<template>
	<view style="padding-top: 40upx;">
		<view class="inputArea" style="text-align: center;">
			<image class="logo-img" src="/static/images/money.png"></image>
		</view>
		<view class="text-xl padding text-center">
			<text class="text-black text-bold">记账薄</text>
		</view>
		<view class="text-s padding text-center">
			<text class="text-gray">坚持记账</text>
		</view>
		<view class="inputArea">
			<button class="login-button bg-gradual-orange" open-type="getUserInfo" @getuserinfo="goLogin">翻开记账簿</button>
		</view>
	</view>
</template>

<script>
	import {
		showErrMsg
	} from '@/common/public_util.js';

	let _self;
	export default {
		components: {},
		data() {
			return {

			}
		},
		onLoad() {
			_self = this;
		},
		methods: {
			goLogin() {
				uni.authorize({
					scope: 'scope.userInfo',
					success() {
						_self.getUserInfo();
					},
					fail: (err) => {
						showErrMsg(err)
					}
				})
				// _self.getUserInfo();
			},
			getUserInfo: () => {
				uni.showLoading({
					title: '正在授权登录中........'
				});
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						// success会返回用户login：ok，以及code
						let code = loginRes.code
						let appid = "wx702fddfd3e7eeff7"
						let secret = "d66b6da15c1edc251e24b4f7e3483ccf"
						let url = 'https://api.weixin.qq.com/sns/jscode2session'
						// 构造参数获取openid
						uni.request({
							url: url,
							data: {
								"appid": appid,
								"js_code": code,
								"secret": secret,
								"grant_type": "authorization_code"
							},
							success: result => {
								uni.setStorageSync('openid', result.data.openid)
								// 向后端发送数据
								uni.request({
									url: "https://www.baidu.com",
									method: 'POST',
									data: {
										"openid": result.data.openid
									},
									header: {
										"content-type": "application/json"
									},
									success: res => {},
									fail: err => {
										showErrMsg(err)
									}
								})
							},
							fail: err => {
								showErrMsg(err)
							}
						})
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: (res) => {
								let userInfo = res.userInfo
								// 保存用户信息，昵称以及头像，用于界面显示
								uni.setStorageSync("userInfo", userInfo)
								uni.hideLoading()
								uni.switchTab({
									url: '/pages/app/bookkeeping/bookkeeping'
								})
							},
							fail: (fail) => {
								uni.hideLoading()
								uni.showToast({
									icon: "none",
									title: '翻开记账薄要允许授权'
								});
							}
						});
					},
					fail: (fail) => {
						uni.hideLoading()
						showErrMsg(fail)
					}
				});
			}
		}
	}
</script>

<style>
	.inputArea {
		padding: 30upx 10%;
	}

	.inputClass {
		border: 2px solid #ccc;
		border-radius: 44upx;
		outline: 0;
		width: 90%;
		padding: 16upx 30upx;
		background-color: #FFFFFF;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.login-button {
		/* background: #2fc25b; */
		color: #FFFFFF;
		border-radius: 54upx;
		font-size: 36upx;
		text-align: center;
		padding: 20upx;
	}
</style>
